<template>
  <div style="width: 100%;text-align: left">
    <el-input maxLength="30"
              style="width: 20%"
              placeholder="名称"
              v-model="searchForm.name"
              clearable
    />
    <el-input maxLength="10"
              style="width: 20%;margin-left: 1%"
              placeholder="年龄"
              v-model="searchForm.age"
              clearable
    />
    <el-input maxLength="10"
              style="width: 20%;margin-left: 1%"
              placeholder="位置"
              v-model="searchForm.address"
              clearable
    />
    <el-input maxLength="10"
              style="width: 20%;margin-left: 1%"
              placeholder="日期"
              v-model="searchForm.date"
              clearable
    />
    <el-table
        :data="treeTable"
        style="width: 100%;margin-top: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="date"
          label="日期"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          sortable
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

let proVal = null
export default {
  name: 'Home',
  components: {},
  created() {
   // console.log("searchElTable document.clientHeight:",document.documentElement.clientHeight)

    window.addEventListener('resize', function() {
      //console.log('窗口大小已变化111');
      // 在这里添加你需要执行的代码
      // 例如，可以获取窗口的新尺寸：
      //console.log('宽度11:', window.innerWidth);
     // console.log('高度111:', window.innerHeight);
     // console.log('高度document.documentElement.clientHeight11:', document.documentElement.clientHeight);
    });


  },
  mounted() {
    console.log(" window.parent:", window.parent == window)
  },
  data() {
    return {
      searchForm: {
        name: '',
        age: '',
        address: '',
        date: '',
      },
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎1',
          age: '16',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎2',
          age: '17',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎3',
          age: '20',
          address: '上海市普陀区金沙江路 6654 弄',
          children: [
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎4',
              age: '21',
              address: '上海市普陀区金沙江路 2345 弄'
            },
            {
              id: 32,
              date: '2016-05-01',
              name: '王小虎5',
              age: '19',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎6',
          age: '20',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      expandRow: [],
    }
  },
  computed: {
    treeTable() {
      let treeData = this.tableData
      //获取需要刷选的属性
      const propList = this.exitProps(this.searchForm)
      //初始化
      proVal = {}
      //赋属性
      propList.forEach(item => {
        proVal[item] = ''
      })
      //如果都为false 则不进行过滤，直接获取所有
      if (propList.length > 0) {
        let handleTreeData = this.handleTreeData(treeData, this.searchForm, Object.keys(this.searchForm))
        this.setExpandRow(handleTreeData)
        this.expandRow = this.expandRow.join(',').split(',')
        return handleTreeData
      }

      return this.tableData
    }
  },
  methods: {
    /**
     * 根据搜索条是否有值，把需要搜索的属性给保存返回
     */
    exitProps(obj) {
      let propList = []
      for (const prop in obj) {
        if (obj[prop]) {
          propList.push(prop)
        }
      }
      return propList
    },
    /**
     * 处理筛选出来的数据
     * @param treeData
     */
    setExpandRow(treeData) {
      if (treeData.length) {
        for (let i of treeData) {
          this.expandRow.push(i.id)
          if (i.children.length) {
            this.setExpandRow(i.children)
          }
        }
      }
    },
    /**
     * 过滤筛选数据
     * @param treeData 树形数据
     * @param searchForm 查询条件
     * @param searchNames 查询条件的字段 用来与树形对象匹配
     * @returns {*[]}
     */
    handleTreeData(treeData, searchForm, searchNames) {
      if (!treeData || treeData.length === 0) {
        return []
      }
      //获取需要进行筛选的属性
      const propList = this.exitProps(this.searchForm)
      const array = []
      //把搜索条件的值进行提取赋值
      propList.forEach(prop => {
        proVal[prop] = searchForm[prop]
      })
      treeData.forEach(item => {
        let match = false
        //搜索条件的值是否和数据相匹配
        let isEqual = true
        propList.forEach(prop => {
          isEqual = isEqual && item[prop].includes(proVal[prop])
        })
        match |= isEqual
        if (this.handleTreeData(item.children, searchForm, searchNames).length > 0 || match) {
          array.push({
            ...item,
            children: this.handleTreeData(item.children, searchForm, searchNames),
          })
        }
      })
      return array
    },
  }
}
</script>

<style scoped>

</style>